<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理系统</title>
    <!-- 引入bootstrap.css -->
    <link
      rel="stylesheet"
      href="../../lib/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- 公共 -->
    <link rel="stylesheet" href="../../css/base.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" href="../main">首页</a>
            <a class="nav-link" href="../search">搜索</a>
            <a class="nav-link" href="../borrow">借阅</a>
            <a class="nav-link" href="../people">个人</a>
            <a class="nav-link" href="../detail">图书详情</a>
            <a class="nav-link" href="../login">退出</a>
          </div>
        </div>
      </div>
    </nav>
    <!-- 提示框 -->
    <div class="alert info-box" style="margin-top: 20px;">操作结果</div>

    <div class="big">
      <div class="container mt-5">
        <h2 class="mb-4">个人资料</h2>
        <form class="form">
          <!-- 动态渲染 -->
        </form>
      </div>
    </div>
  </body>
  <script src="../../lib/axios/dist/axios.min.js"></script>
  <script src="../../utils/request.js"></script>
  <script src="../../utils/alert.js"></script>
  <script>
    // 使用axios发送请求获取用户信息并渲染
    //获得本地存储的userId
    const id = localStorage.getItem("userId");
    // console.log(id, 'id')
    const renderUserInfo = async () => {
      const res = await axios(`/user/library/${id}`);
      // console.log(res)
      const user = res.data.data;
      const form = document.querySelector(".form");

      form.innerHTML = `
               <div class="mb-3 w-50">
              <label for="name" class="form-label">用户id</label>
              <input disabled type="text" class="form-control" id="username" value=${id} >
          </div>
         <div class="mb-3 w-50">
              <label for="name" class="form-label">姓名</label>
              <input type="text" class="form-control" id="name" value=${user.name
      } readonly>
          </div>


          <div class="mb-3 w-50">
              <label for="college" class="form-label">学院</label>
              <input type="text" class="form-control" id="college" value=${user.college
      } readonly>
          </div>

          <div class="mb-3 w-50">
              <label for="major" class="form-label">专业</label>
              <input type="text" class="form-control" id="major" value=${user.major
      } readonly>
          </div>
            <button class="btn btn-primary" id="editButton" >编辑</button>
           <button class="btn btn-success" style="display: none;" id="submitButton">确认</button> 
      `;
      // console.log(1);
      setTimeout(() => {
        bindEventsToButtons();
      }, 0);
    };

    const bindEventsToButtons = () => {
      const inputs = document.querySelectorAll(".form-control");
      const editButton = document.getElementById("editButton");
      const submitButton = document.getElementById("submitButton");

      // 切换到编辑模式
      editButton.addEventListener("click", (e) => {
        e.preventDefault();
        // 将输入框变为可编辑
        inputs.forEach((input) => {
          input.removeAttribute("readonly");
        });
        // 隐藏编辑按钮，显示确认按钮
        editButton.style.display = "none";
        submitButton.style.display = "inline-block";
      });

      // 确认提交数据
      submitButton.addEventListener("click", async (e) => {
        e.preventDefault();
        const userId = localStorage.getItem("userId");
        // console.log("userId111:", userId);
        // console.log("点击了确认");

        const updatedUser = {
          userId: userId,
          name: document.getElementById("name").value,
          college: document.getElementById("college").value,
          major: document.getElementById("major").value,
        };

        

        // try {
        const res = await axios.put("/user/library/update", updatedUser);
        // console.log(111111111111111111);
        // console.log(res);

        if (res.data.code === 1) {
          myAlert(true, "更新成功");
          // console.log("更新成功", res.data);

          // 更新表单为只读状态
          inputs.forEach((input) => {
            input.setAttribute("readonly", true);
          });

          // 隐藏确认按钮，显示编辑按钮
          editButton.style.display = "inline-block";
          submitButton.style.display = "none";
          renderUserInfo();
        }
        // } catch (error) {
        //   console.error("更新失败", error);
        // }
      });
    };
    // 页面加载时执行渲染函数
    window.onload = function () {
      renderUserInfo();
    };
  </script>
</html>
